<template>
	<view class="me container">
		<view class="w100" v-if="show">
			<view class="w100  pt30 pb30 flex-xy" style="height: 180rpx;">
				<view class="w90 h100  flex">
					<!-- 头像 -->
					<view class="inlineB mr20" style="height: 120rpx;width: 120rpx;">
						<view class="w100 h100  flex-xy">
							<image
								src="../../static/tou.jpg"
								mode="widthFix"
								class="w90 h90 radio50p"
							></image>
						</view>
					</view>

					<!-- 右侧 -->
					<view class="h100 inlineB ">
						<view class="h100 flex-xy">
							<!-- <view class="w100 textOver fs40 fwbr">小明的小明</view> -->
							<view class="w100 textOver fs40 fwbr">ID:{{this.id}}</view>
							<view style=" background:#F2BDBD ;" class=" coF flex-xy pr20 pl20 radio50" @click="showtheCode">瑞币余额 | {{this.balance}}</view>
						</view>
						
					</view>
				</view>
			</view>

			<view class="w100 flex-xy">
				<view class="w90 mt30 mb30"><text class="fs36 fwbr mr10">热销电子券</text></view>

				<view class="w90 shadow bgF radio20 pt10 pb10 pl10 pr10" style="height: 400rpx; ">
					<u-grid :col="3" :border="false">
						<u-grid-item @click="toOrderList">
							<u-icon name="coupon-fill" :size="46"></u-icon>
							<view class="grid-text mt20">电子券订单</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
	
		<view class="w100 Success flex-xy mt50 fs30" v-else >
			您未登录哦!
			
			<view @click="toLogin" class=" flex-xy mt30 mb30 coBlueDark radio50" style="width: 180rpx;height: 50rpx;border: 1px solid #317ef3;  ">立即登录</view>
		</view>
		
		
		<!-- 兑换二维码 -->
		<u-popup v-model="showCode" mode="center " border-radius="20">
			<view class="w100 h100 flex-xy">
				<view class="bgF radio20 " style="height: 510rpx;width: 400rpx;">
					<view class="flex-xy w100 bgF" style="height: 400rpx ;border-radius: 20rpx 20rpx 0 0; ">
						<tki-qrcode ref="qrcode" v-if="ifShow" cid="qrcode2" :val="val" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true"></tki-qrcode>
					</view>
					<view class="w100 flex-xy" style="height: 110rpx;">
					<!-- <view class="fs28 mb10">长按识别上方二维码</view> -->
						<view @click="failConfirm" class="w60 coF fs30 radio50 flex-xy  " style="background: #EC1C1C;height: 50rpx;">确 认</view>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	var api = require('../../api/api.js');
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
export default {
	components: { tkiQrcode },
	data() {
		return {
			
			ifShow: true,
			val: uni.getStorageSync('username'), // 要生成的二维码值
			size: 360, // 二维码大小
			unit: 'rpx', // 单位
			background: '#b4e9e2', // 背景色
			foreground: '#309286', // 前景色
			pdground: '#32dbc6', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: false, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			src: '', // 二维码生成后的图片地址或base64
			showCode: false,
			
			
			show: false , //未登录
			balance:0,
			id:0,
		};
	},
	methods: {
		// 未登录
		toLogin(){
			uni.reLaunch({
				url:'/pages/index/login'
			})
		},
		// 跳转到我的卡券列表
		toOrderList() {
			uni.navigateTo({
				url: '/pages/allIndex/orderList'
			});
		},
		// 兑换失败确认
		failConfirm() {
			this.showCode = false;
		},
		showtheCode(i) {
			// var text = this.quanList[i].url;
			// console.log(text);
			// this.val = text;
			// this.show = true;
			this.showCode = true;
		},
	},
	mounted() {
		
	},
	onShow() {
		let token = uni.getStorageSync('token');
		console.log(token);
		if(!!token){
			
			uni.request({
				url: api.Price,
				method: 'post',
				data: {
					username: uni.getStorageSync('username'),
				},
				success: res => {
					console.log(res.data.data.balance)
					let userdata = {
						"balance": res.data.data.balance,
					}
					try {
						uni.setStorageSync('balance', userdata.balance);
						this.balance = 	uni.getStorageSync('balance')
					} catch (e) {
						// error
					}
				}
			})
			
			
			
				this.show = true
				let id = uni.getStorageSync('username'); 
				let balance = uni.getStorageSync('balance'); 
				this.id = id
				this.balance = balance
		}
	}
};
</script>

<style lang="scss"></style>
